<template>
  <div class="box">
    <div class="header" id="yyheader">登录界面</div>
    <div class="content" id="login-register">
      <div class="register">
        <div class="tel">
          <span>+86</span>
          <input type="tel" placeholder="手机号" v-model="tel" />
        </div>
        <p>{{ teltip }}</p>
        <div class="pwd">
          <input type="password" placeholder="请输入您的密码" v-model="password" />
        </div>
        <p>{{ passwordtip }}</p>
        <div class="login">
          <button class="loginBtn" @click="registerlogin">登录</button>
        </div>
        <div class="unlogin">
          <div>
            <input type="checkbox" v-model="signs">自动登录
          </div>
          <a @click="toRegister">短信验证码登录</a>
          <a href="##">忘记密码</a>
        </div>
        <p class="tip">{{ tip }}</p>
      </div>
      <div class="other">
        <span>
          登录代表你已同意
          <a href="##">法律声明</a>&nbsp;和&nbsp;
          <a href="##">隐私条款</a>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      tel: '',
      password: '',
      teltip: '',
      passwordtip: '',
      tip: '',
      signs: true
    }
  },
  watch: {
    tel (newVal) {
      let reg1 = /^\d{11}$/
      if (newVal === '') {
        this.teltip = '手机号不能为空'
      } else if (!reg1.test(newVal)) {
        this.teltip = '手机号格式错误'
      } else {
        this.teltip = ''
      }
    },
    password (newVal) {
      if (newVal === '') {
        this.passwordtip = '密码不能为空'
      } else if (newVal.length < 6) {
        this.passwordtip = '密码格式错误'
      } else {
        this.passwordtip = ''
      }
    }
  },
  methods: {
    registerlogin () {
      if (this.teltip !== '') {
        this.tip = '请输入正确的手机号码'
        return
      }
      if (this.passwordtip !== '') {
        this.tip = '请输入正确的密码'
        return
      }
      this.tip = ''
      axios.post('/users/login', {
        tel: this.tel,
        password: this.password,
        signs: this.signs
      }).then(res => {
        if (res.data.code === '10010') {
          this.tip = '登录成功'
          // const token = res.data.token
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('userid', res.data.userid)
          // this.$router.back()
          this.$router.push('/')
          // location.assign('/')
        } else {
          this.tip = '密码错误'
        }
      })
    },
    toRegister () {
      this.$router.replace('/register-login')
    }
  }
}
</script>

<style lang="scss">
@import "@/lib/reset.scss";
#yyheader {
  @include rect(100%,0.44rem);
  @include background-color(#1d1d1d);
  @include font-size(0.20rem);
  @include font-weight(bolder);
  @include line-height(0.44rem);
  @include text-align(center);
  @include color(#fff);
  @include overflow(auto);
}
#login-register {
  @include background-color(#e5e5e5);
  @include flexbox();
  @include flex-direction(column);
  @include justify-content(space-between);
  @include overflow(auto);
  .register {
    @include flexbox();
    @include flex-direction(column);
    @include margin(0.2rem 0 0);
    input {
      // @include rect(100%, 100%);
      @include rect(100%, 0.45rem);
      text-indent: (0.1rem);
      border: 0;
    }
    >p {
      @include rect(100%, 0.3rem);
      @include text-align(center);
      @include line-height(0.3rem);
      @include color(#f00);
      &.tip {
        @include font-size(0.2rem);
      }
    }
    > div {
      @include margin(0 auto);
      @include rect(94%, 0.45rem);
      @include border-radius(0.08rem);
      @include flexbox();
      @include background-color(#fff);
      @include border(1px, #ccc, solid);
      @include overflow();
      &.tel span {
        @include rect(0.5rem, 100%);
        @include font-size(0.16rem);
        @include text-align(center);
        @include line-height(0.45rem);
      }
      &.login {
        @include rect(94%, 0.55rem);
        button {
          @include rect(100%, 100%);
          @include background-color(#81a8e4);
          @include font-size(0.18rem);
          @include color(#fff);
          border: 0;
        }
      }
      &.unlogin {
        @include margin(0.2rem auto 0);
        @include padding(0 0.1rem);
        @include background-color(#e5e5e5);
        @include font-size(0.14rem);
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        input {
          @include rect(0.2rem, 0.2rem);
          @include margin(0 0.05rem 0);
          vertical-align: middle
        }
        a {
          @include color(#666);
        }
      }
    }
  }
  .other {
    @include margin(0 auto 0.3rem);
    @include color(#333);
    a {
      @include color(#5079d9);
    }
  }
}
</style>
